<!doctype html>
<html lang='en'>

<head>
    <title>Chat</title>
    <link rel='stylesheet' href='/stylesheets/style.css'></link>
    <style>
        h1 {
            font-size: inherit;
        }
    </style>
</head>

<body>
<div id='content'>
    <div id='room'></div>
    <div id='room-list'></div>
    <div id='messages'></div>

    <form id='send-form'>
        <input id='send-message'/>
        <input id='send-button' type='submit' value='Send'/>

        <div id='help'>
            Chat commands:
            <ul>
                <li>Change nickname: <code>/nick [username]</code></li>
                <li>Join/create room: <code>/join [room name]</code></li>
            </ul>
        </div>
    </form>
</div>

<script src='/socket.io/socket.io.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='/javascripts/chat.js' type='text/javascript'></script>
<script src='/javascripts/chat_ui.js' type='text/javascript'></script>
</body>
</html>
